<!--
 * @Author: [you name]
 * @Date: 2021-09-22 14:16:56
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-12 20:23:41
 * @Description: 封装的头部和底部
-->
<template>
  <div>
    <div class="content">
      <div class="wrapper">
        <div class="header_top">
          <!-- 左右两边的最下面的三角块 -->
          <span class="icon_left"></span>
          <span class="icon_right"></span>
          <div class="left" @click="toHome">
            <div class="img">
              <img src="https://news.hnu.edu.cn/images/hnnews_1.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="rightMain">
              <div class="input">
                <el-input 
                  v-model.trim="newsSearch"
                  clearable
                  placeholder="请输入关键字">
                  <el-button @click="queryNews" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div class="hudaPage">
                <a href="http://www.hnu.edu.cn/">湖大主页</a>
              </div>
              <div class="smartEdition">
                <a href="">
                  <i class="fontFamily hhtxshouji"></i>
                  <span>手机版</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav">
      <div class="wrapper1">
        <ul class="menu">
          <li
            @click="toList(cateItem)"
            v-for="cateItem in category"
            :key="cateItem.id"
          >
            {{ cateItem.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入get
import { get } from "../../utils/request";
export default {
  data() {
    return {
      // 接收分类栏目的数组
      category: [],
      //点击搜索
      newsSearch: '',
      //定义一个查询参数
      
    };
  },
  methods: {
    // 点击搜索 获取输入数据
    queryNews(){
        const newsData = this.newsSearch
        console.log(newsData);
        
    },

    // 跳转到列表页
    toList(categoryData) {
      // 路由跳转
      this.$router.push({
        path: "/list",
        //要传递的参数  用query接收,键值对的形式  把categoryData传递过去
        query: categoryData,
      });
    },

    // 从接口拿到分类栏
    getCategoryData() {
      get("/index/category/findAll").then((res) => {
        console.log(res.data);
        this.category = res.data;
      });
    },
    //返回首页
    toHome() {
      this.$router.push("/");
    },
  },
  // vue生命周期函数
  created() {
    this.getCategoryData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: sticky;
  .wrapper {
    .header_top {
      height: 95px;
      background: -webkit-linear-gradient(left, #c1272d, #f15a24);
      display: flex;
      position: relative;
      .icon_left {
        position: absolute;
        left: 0;
        background: url(https://news.hnu.edu.cn/images/hnnews_2.png);
        width: 34px;
        height: 34px;
        bottom: -34px;
      }
      .icon_right {
        position: absolute;
        right: 0;
        background: url(https://news.hnu.edu.cn/images/hnnews_3.png);
        width: 34px;
        height: 34px;
        bottom: -34px;
      }
      .left {
        flex: 1;
        // background-color: rgb(67, 185, 93);
        position: relative;
        .img {
          position: absolute;
          left: 33px;
          top: 16px;
          cursor: pointer;
          .img {
            width: 320px;
            height: 63px;
          }
        }
      }
      .right {
        flex: 2;
        position: relative;
        .rightMain {
          position: absolute;
          right: 33px;
          width: 500px;
          height: 95px;
          float: right;
          .input {
            width: 350px;
            height: 95px;
            display: inline-block;
            overflow: hidden;
            position: relative;
            .el-input {
              position: absolute;
              top: 27px;
            }
          }
          .hudaPage {
            width: 75px;
            height: 95px;
            display: inline-block;
            margin: auto;
            overflow: hidden;
            position: relative;
            a {
              font-size: 14px;
              color: white;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -28px;
              margin-top: -11px;
            }
          }
          .smartEdition {
            width: 75px;
            height: 95px;
            display: inline-block;
            overflow: hidden;
            a {
              i {
                color: #fff;
              }
              span {
                color: #fff;
              }
              i,
              span {
                line-height: 95px;
              }
            }
          }
        }
      }
    }
  }
}

// 导航栏
.nav {
  .wrapper1 {
    // background-color: rgb(238, 219, 111);
    .menu {
      height: 75px;
      background: url(https://news.hnu.edu.cn/images/hnnews_5.jpg) right bottom
        no-repeat #fff;
      li {
        height: 75px;
        float: left;
        font-size: 16px;
        cursor: pointer;
        line-height: 75px;
        margin: 0 20px;
        color: rgb(88, 83, 83);
        font-weight: bold;
      }
      li:hover {
        background-color: rgba(219, 214, 214, 0.493);
      }
    }
  }
}
</style>